<template>

	<view>
		<view class="uni-header">
			<uni-stat-breadcrumb class="uni-stat-breadcrumb-on-phone" />
			<view class="uni-group">
				<button class="uni-button" type="warn" size="mini" :disabled="!selectedIndexs.length"
					@click="delTable">{{ $t('common.button.batchDelete') }}</button>
				<input class="uni-search" type="text" v-model="query" @confirm="search"
					:placeholder="$t('common.placeholder.query')" />
				<button class="uni-button hide-on-phone" type="default" size="mini"
					@click="search">{{ $t('common.button.search') }}</button>
				<!-- 导入文件 -->
				<!-- <button class="uni-button" type="primary" @click="chooseFile" size="mini">导入</button> -->
				<!-- 	<download-excel class="hide-on-phone" :fields="exportExcel.fields" :data="exportExcelData"
					:type="exportExcel.type" :name="exportExcel.filename">
					<button class="uni-button" type="primary" size="mini">{{$t('common.button.exportExcel')}}</button>
				</download-excel> -->

			</view>
		</view>
		<view class="uni-container">
			<unicloud-db ref="udb" :collection="collectionList" :options="options" :where="where" page-data="replace"
				:orderby="orderby" :getcount="true" :page-size="options.pageSize" :page-current="options.pageCurrent"
				v-slot:default="{ data, pagination, loading, error, options }" @load="onqueryload">

				<uni-table ref="table" :loading="loading" :emptyText="error.message || '没有更多数据'" border stripe
					type="selection" @selection-change="selectionChange" style="max-height: 710px;">
					<!-- 订单信息列 -->
					<uni-tr>
						<uni-th align="center" width="50">序号</uni-th>
						<uni-th align="center" width="220">订单号</uni-th>
						<uni-th align="center" width="120">货品编码</uni-th>
						<uni-th align="center">货品名称</uni-th>
						<uni-th align="center">状态</uni-th>

						<uni-th align="center" width="100">操作日期</uni-th>
						<!-- <uni-th align="center" width="100">操作</uni-th> -->
					</uni-tr>

					<uni-tr v-for="(item, index) in data" :key="index">
						<uni-td align="center">{{ index + 1 }}</uni-td>
						<uni-td align="center">{{ item.order_id[0] ? item.order_id[0].orders_number : ''}}</uni-td>
						<uni-td align="center">{{ item.huoping_id[0] ? item.huoping_id[0].goods_sn : '' }}</uni-td>
						<uni-td align="center">{{ item.huoping_id[0] ? item.huoping_id[0].name : '' }}</uni-td>
						<uni-td align="center">{{ item.notes }}{{item.quantity_changed}}</uni-td>
						<uni-td align="center">{{ $formatDate(item.modified_at) }}</uni-td>
						<!-- <uni-td align="center">
							<view class="uni-group">
								<text class="blue cu_po"
									@click="navigateTo('/pages/order-text/list?id=' + item._id+'&orders_number='+item.orders_number, false)">详情</text>
								<text class="blue cu_po" style="margin-left: 5px;margin-right: 5px;"
									@click="navigateTo('./add?id=' + item._id, false)">修改</text>

								<text class="blue cu_po" @click="daochu(item._id)"> 导出 </text>
							</view>
						</uni-td> -->
					</uni-tr>

				</uni-table>

				<!-- 分页 -->
				<view class="uni-pagination-box">
					<uni-pagination show-icon :page-size="pagination.size" v-model="pagination.current"
						:total="pagination.count" @change="onPageChanged" />
				</view>
			</unicloud-db>
			<uni-fab ref="fab" horizontal="right" vertical="bottom" :pop-menu="false" @fabClick="fabClick" />
		</view>
	</view>
</template>

<script>
	import * as XLSX from 'xlsx'
	const db = uniCloud.database()
	const dbCollectionName = 'order-record';
	// 表查询配置
	const dbOrderBy = 'modified_at desc'; // 排序字段
	const dbSearchFields = ['huoping_id', 'order_id', 'quantity_changed', 'notes']; // 支持模糊搜索的字段列表
	// 分页配置
	const pageSize = 20;
	const pageCurrent = 1;
	export default {
		data() {
			return {
				pageCurrent: 1,
				options: {
					pageSize,
					pageCurrent
				},
				collectionList: [db.collection('order-record').getTemp(), db.collection('opendb-mall-goods').getTemp(),db.collection('orders').getTemp()],
				loadMore: {
					contentdown: '',
					contentrefresh: '',
					contentnomore: ''
				},
				value: -1,
				range: [{
						"text": "未完结",
						"value": false
					},
					{
						"text": "已完结",
						"value": true
					}
				],
				selectedIndexs: [],
				query: '',
				where: '',
				orderby: dbOrderBy,
				exportExcelData: [],
				exportExcel: {
					"filename": "订单.xls",
					"type": "xls",
					"fields": {
						"订单号": "orders_number",
						"客户名称": "customer",
						"结算方式": "settlement_method",
						"币种": "currency",
						"是否提醒采购": "purchase_order_reminder",
						"合同编号": "contract_number",
						"发货日期": "delivery_date",
						"预付款金额": "prepayment_amount",
						"订单状态": "order_termination",
						"创建日期": "create_date"

					}
				},
			}
		},
		onPullDownRefresh() {
			this.$refs.udb.loadData({
				clear: true
			}, () => {
				uni.stopPullDownRefresh()
			})
		},
		onReachBottom() {
			this.$refs.udb.loadMore()
		},
		onLoad(e) {
			this._filter = {}
		},
		methods: {
			onPageChanged(e) {
				this.pageCurrent = e.current
				this.selectedIndexs.length = 0;
				this.$refs.table.clearSelection();
				this.$refs.udb.loadData({
					current: e.current
				});
			},
			filterChange(e, name) {

				console.log(e);
				this._filter[name] = {
					type: e.filterType,
					value: e.filter
				}
				console.log(e.filter.length);
				if (e.filter.length == 1) {
					let type = e.filter[0]
					this.where = {
						'order_termination': type
					}
				}
				this.$nextTick(() => {
					this.$refs.udb.loadData()
				})
			},
			onqueryload(data) {
				this.exportExcelData = data
			},
			getWhere() {
				const query = this.query.trim();
				if (!query) {
					return '';
				}
				let queryRe;
				try {
					queryRe = new RegExp(query, 'i');
				} catch (err) {
					uni.showToast({
						title: '请勿输入\等不满足正则格式的符号',
						icon: 'none'
					});
					return;
				}
				return dbSearchFields.map(name => queryRe + '.test(' + name + ')').join(' || ');
			},
			search() {
				const newWhere = this.getWhere();
				const isSameWhere = newWhere === this.where;
				console.log(newWhere);
				this.where = newWhere;
				if (isSameWhere) {
					// 相同条件时，手动强制刷新
					this.loadData();
				}
			},
			loadData(clear = true) {
				this.$refs.udb.loadData({
					current: this.pageCurrent
				});
			},
			// 多选处理
			selectedItems() {
				var dataList = this.$refs.udb.dataList;
				console.log(dataList);
				return this.selectedIndexs.map(i => dataList[i]._id);
			},
			// 批量删除
			delTable() {
				this.$refs.udb.remove(this.selectedItems(), {
					success: res => {
						this.$refs.table.clearSelection();
					}
				});
			},
			// 多选
			selectionChange(e) {
				this.selectedIndexs = e.detail.index;
			},
			confirmDelete(id) {
				this.$refs.udb.remove(id, {
					success: res => {
						this.$refs.table.clearSelection();
					}
				});
			},
			navigateTo(url) {
				uni.navigateTo({
					url,
					events: {
						refreshData: () => {
							this.loadData();
						}
					}
				});
			},
			fabClick() {
				// 打开新增页面
				uni.navigateTo({
					url: './add',
					events: {
						// 监听新增数据成功后, 刷新当前页面数据
						refreshData: () => {
							this.$refs.udb.loadData({
								clear: true
							})
						}
					}
				})
			}
		}
	}
</script>

<style>
</style>